<template>
  <div>
    <div class="card" style="margin-bottom: 10px;">
      <el-input  style="width: 260px; margin-right: 10px;" v-model="data.project_name" placeholder="请输入项目名称查询" :prefix-icon="Search"/>
      <el-button type="primary" style="margin-left:10px;">查询</el-button>
      <el-button type="info">重置</el-button>
    </div>

    <div class="card" style="margin-bottom: 10px;">
      <div>
      <el-button type="primary" @click="handleAdd">新增项目</el-button>
      </div>

      <div>
        <el-table :data="data.tableData" style="width: 100%">
          <!-- <el-table-column prop="project_id"  label="项目编号" /> -->
          <el-table-column prop="project_name" label="项目名称" />
          <el-table-column prop="status" label="项目状态"/>
          <el-table-column prop="model_employee_name" label="模型负责人" />
          <el-table-column prop="rendering_employee_name" label="渲染负责人" />
          <el-table-column prop="post_production_employee_name" label="后期负责人" />
          <!-- 查看项目文件，点击后将project_id存入全局变量，进行跳转 -->
          <el-table-column label="查看">
            <template #default="scope">
              <el-button type="primary" @click="myFile(scope.row)" plain>项目文件</el-button>
            </template>
          </el-table-column>

          <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="handelEdit(scope.row)">编辑</el-button>
          </template>
         </el-table-column>

        </el-table>
      </div>

      <!-- 新增项目框 -->
      <el-dialog width="35%" v-model="data.addVisible" title="添加项目">
      <el-form :model="data.addform" label-width="100px" label-position="right" style="padding-right: 40px">
        <!-- <el-form-item label="项目编号">
          <el-input v-model="data.addform.project_id" autocomplete="off" />
        </el-form-item> -->
        <el-form-item label="项目名称">
          <el-input v-model="data.addform.project_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="项目状态">
          <el-input v-model="data.addform.project_status" autocomplete="off" />
        </el-form-item>
        <el-form-item label="项目日期">
          <el-input v-model="data.addform.date" autocomplete="off" />
        </el-form-item>
        <el-form-item label="客户编号">
          <el-input v-model="data.addform.customer_id" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.addVisible = false">取 消</el-button>
          <el-button type="primary" @click="addsave">保 存</el-button>
        </span>
      </template>
      </el-dialog>

      <!-- 编辑框 -->
      <el-dialog width="35%" v-model="data.editVisible" title="修改状态">
      <el-form :model="data.editform" label-width="100px" label-position="right" style="padding-right: 40px">
        <el-form-item label="项目编号">
          <el-input v-model="data.editform.project_id" autocomplete="off" :disabled="true"/>
        </el-form-item>
        <el-form-item label="模型负责人">
          <el-input v-model="data.editform.model_employee_id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="渲染负责人">
          <el-input v-model="data.editform.rendering_employee_id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="后期负责人">
          <el-input v-model="data.editform.post_production_employee_id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="项目状态">
          <el-input v-model="data.editform.project_status" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.editVisible = false">取 消</el-button>
          <el-button type="primary" @click="editSave">编辑</el-button>
        </span>
      </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { handleError, reactive } from "vue";
import { Calendar, Search } from '@element-plus/icons-vue'
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import {useStore} from 'vuex'
import router from "@/router"

const store=useStore()

const data=reactive({
  //从全局变量获取employeeInfo信息存入employee
  employee:store.state.employeeInfo,

  tableData:[],

  //新增dialog框
  addVisible:false,
  addform:{},
  //编辑dialog框
  editVisible:false,
  editform:{},

  //项目信息保存至全局变量
  Project:{}


})

//查看项目文件
const myFile=(row)=>{
  data.Project=JSON.parse(JSON.stringify(row))
  store.commit('update_project_id',data.Project.project_id)
  router.push('/myfile')
}

//load()显示项目清单
const load=()=>{
   //employee为表单数据，此时需要转到json字符串形式
   const employeeData= JSON.stringify(data.employee);
  const formdata=new FormData()
  formdata.append('employee',employeeData)
  axios.post('http://localhost:8088/GET/ProjectInfo',formdata).then(res=>{
    data.tableData=res.data.data.ProjectInfo

   //再通过id获取负责人姓名
   const idData = [];
    for (let i = 0; i <data.tableData.length; i++) {
      const newData = {
        model_employee_id: data.tableData[i].model_employee_id,
        rendering_employee_id: data.tableData[i].rendering_employee_id,
        post_production_employee_id: data.tableData[i].post_production_employee_id,
      };
      idData.push(newData);
      formdata.delete('employee_id'); // Remove previous employee_id data
      formdata.append('employee_id', JSON.stringify(idData[i]));
      axios.post('http://localhost:8088/GET/EmployeeNameById', formdata).then(res2=>{
        data.tableData[i].model_employee_name=res2.data.data.model_employee_name
        data.tableData[i].rendering_employee_name=res2.data.data.rendering_employee_name
        data.tableData[i].post_production_employee_name=res2.data.data.post_production_employee_name
      });

      //通过状态值判断状态
      if(data.tableData[i].project_status==0){
        data.tableData[i].status="模型"
      }else if(data.tableData[i].project_status==1){
        data.tableData[i].status="渲染"
      }else if(data.tableData[i].project_status==2){
        data.tableData[i].status="后期"
      }else if(data.tableData[i].project_status==3){
        data.tableData[i].status="完成"
      }else if(data.tableData[i].project_status==4){
        data.tableData[i].status="取消"
      }
    }
    console.log(data.tableData)
  })

}

load()


//新增项目
const handleAdd=()=>{
  data.addform={}
  data.addVisible=true
}

const addsave=()=>{
  axios.post('http://localhost:8088/POST/CreateProjectInfo',data.addform).then(res=>{
    if(res.data.success){
      ElMessage.success("添加成功")
      console.log(res)
      load()
      data.addVisible=false
    }else{
      ElMessage.error("添加失败")
    }
  })
}


//编辑项目
const handelEdit=(row)=>{
  data.editform=JSON.parse(JSON.stringify(row))
  data.editVisible=true
}

const editSave=()=>{
  axios.post('http://localhost:8088/POST/ChangeProjectInfo',data.editform).then(res=>{
    console.log(res)
    if(res.data.success){
      ElMessage.success("修改成功")
      console.log(res)
      load()
      data.editVisible=false
    }else{
      ElMessage.error("修改失败")
    }
  })
}
</script>